import logo from '@/assets/logo.svg';
import { STORAGE_USERTOKEN_KEY } from '@/consts';
import { getUserInfo } from '@/utils';
import { Avatar, Dropdown, Menu, Space } from '@arco-design/web-react';
import { IconDown, IconExport } from '@arco-design/web-react/icon';
import { memo, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import './index.scss';

/**
 * 顶部栏
 */
export default memo(
    function HopetoHeader() {
        const naviagate = useNavigate();
        const user = useMemo(() => getUserInfo(), []);

        const menu = (
            <Menu>
                <Menu.Item onClick={() => {
                    localStorage.setItem(STORAGE_USERTOKEN_KEY, '');
                    naviagate('/login');
                }} key="logout">
                    <IconExport />&nbsp;&nbsp;退出
                </Menu.Item>
            </Menu>
        );

        return (
            <div className="hopeto-header">
                <div className='app-title'>
                    {/* <img src={logo} className="app-logo" /> */}
                    <div className='title'>信息部-接口平台</div>
                </div>
                <Dropdown droplist={menu} position="br">
                    {/* <a style={{ color: '#165dff' }} className='user' onClick={e => e.preventDefault()}>
                        <Space>
                            Hi, {user!.name}{user.nickName ? `(${user.nickName})` : ''}
                            {user.Avatar ? <Avatar size={32}><img src={user.Avatar} /></Avatar> : <Avatar size={32} style={{ cursor: 'pointer', color: '#f56a00', backgroundColor: '#fde3cf' }}>{user.name.slice(0, 1)}</Avatar>}
                            <IconDown />
                        </Space>
                    </a> */}
                </Dropdown>
            </div>
        );
    }
);
